<!-- 正文开始 -->
<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-card-body">
      <!-- 头部操作栏 -->
      <div class="layui-form lay-header">
        <div class="toolbar">
          <div class="layui-form-item lay-query-content">
            <div class="lay-query-box">
              <div class="query-lt">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">排产编号：</label>
                  <div class="layui-input-inline">
                    <input
                      name="productionPlanRecordCode"
                      class="layui-input"
                      type="text"
                      placeholder="请输入排产编号"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">物料编码：</label>
                  <div class="layui-input-inline">
                    <input
                      name="skuCode"
                      class="layui-input"
                      type="text"
                      placeholder="请输入物料编码"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">物料规格：</label>
                  <div class="layui-input-inline">
                    <input
                      name="skuSpec"
                      class="layui-input"
                      type="text"
                      placeholder="请输入物料规格"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">日期：</label>
                  <div class="layui-input-inline mr0">
                    <input
                      name="dateRange"
                      class="layui-input date-icon"
                      type="text"
                      placeholder="请选择日期范围"
                      autocomplete="off"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">车间：</label>
                  <div class="layui-input-inline">
                    <input
                            name="workshopName"
                            class="layui-input"
                            type="text"
                            placeholder="请输入车间"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">所属生产计划：</label>
                  <div class="layui-input-inline">
                    <input
                            name="productionPlanId"
                            class="layui-input"
                            type="text"
                            placeholder="请输入所属生产计划"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">计划类型：</label>
                  <div class="layui-input-inline">
                    <select name="orderType">
                      <option value="">全部</option>
                      <option value="temporary">临时计划</option>
                      <option value="order">量产订单</option>
                      <option value="finish">成品销售订单</option>
                      <option value="other">其他计划</option>
                    </select>
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">排产人：</label>
                  <div class="layui-input-inline">
                    <input
                            name="creatorName"
                            class="layui-input"
                            type="text"
                            placeholder="请输入排产人"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">排产时间：</label>
                  <div class="layui-input-inline">
                    <input name="productTime" id="productTime" class="layui-input date-icon" type="text"
                           placeholder="请选择排产时间" style="width: 200px" readonly/>
                  </div>
                  <input name="startProductTime" id="sProductTime" type="hidden"/>
                  <input name="endProductTime" id="eProductTime" type="hidden"/>
                </div>
              </div>
              <div class="query-rt">
                <div class="layui-inline">
                  <button
                    class="layui-btn icon-btn color-green"
                    lay-filter="formSubSearchLog"
                    lay-submit
                  >
                    查询
                  </button>
                  <button
                    class="layui-btn icon-btn color-white"
                    lay-filter="resets"
                    lay-submit
                  >
                    重置
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="lay-btn-rows">
          <div class="lay-btn-box">
            <div class="lay-btn-lt"></div>
            <div class="lay-btn-rt"></div>
          </div>
        </div>
      </div>
      <!-- 表格 -->
      <table
        class="layui-table"
        id="productionRecordTable"
        lay-filter="productionRecordTable"
      ></table>
    </div>
  </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="productionRecordTableBar">
  <a class="layui-btn layui-btn-xs" lay-event="checkPlan1">领料详情</a>

  <a class="layui-btn layui-btn-xs" lay-event="checkPlan">详情</a>
  <a class="layui-btn layui-btn-xs" lay-event="workListBtn">开工单列表</a>
  <a class="layui-btn layui-btn-xs" lay-event="printDoc">打印</a>

  <!-- <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="stop">终止</a> -->
</script>

<!--排产计划详情-->
<script id="checkProductionPlanTemplate" type="text/html">
  <form lay-filter="checkProductionPlanForm" class="layui-form open-form">
    <div class="open-model">
      <div class="open-auto" style="padding-top: 5px;">
        <div class="layui-form-item table-bor table-auto">
          <table
            class="layui-table"
            id="checkProductionPlanTable"
            lay-filter="checkProductionPlanTable"
          ></table>
        </div>
        <div
          class="layui-tab"
          id="checkProductionPlan"
          lay-filter="checkProductionPlan"
          style="display: none;"
        >
          <div class="flex-item">
            <ul class="layui-tab-title" id="checkProcessNodsTitle"></ul>
          </div>

          <div
            class=""
            id="checkProcessNodsContent"
            lay-filter="checkProcessNodsContent"
          >
            <div class="template-box" data-id="{{index}}">
              <div class="layui-col-xs4">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">已排产数量</label>
                  <div class="layui-input-inline">
                    <input
                      name="checkQuantity"
                      class="layui-input text-red br0"
                      type="text"
                      value=""
                      readonly="readonly"
                    />
                  </div>
                </div>
              </div>
              <div class="layui-col-xs4">
                <div class="layui-inline">
                  <label class="layui-form-label w-auto">平均合格率</label>
                  <div class="layui-input-inline">
                    <input
                      name="checkRate"
                      class="layui-input text-red br0"
                      type="text"
                      value=""
                      readonly="readonly"
                    />
                  </div>
                </div>
              </div>

              <div
                class="layui-row table-bor msg-none"
                style="margin-top: 15px;"
              >
                <div
                  class="layui-form-item"
                  style="margin-bottom: 0;margin-top: 15px;"
                >
                  <div class="open-details-title">机台排产</div>
                </div>
                <div class="layui-col-md12">
                  <table
                    class="layui-table"
                    id="checkDeviceProductionTable"
                    lay-filter="checkDeviceProductionTable"
                  ></table>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item text-right pd-20">
        <button
          class="layui-btn layui-btn-primary"
          type="button"
          ew-event="closeDialog"
        >
          取消
        </button>
      </div>
    </div>
  </form>
</script>

<script id="checkProcessNodsTitleTemplate" type="text/html">
  <!-- {{#  layui.each(d, function(index, item){ }} -->
  <li lay-id="{{index}}" process-id="{{item.id}}">{{item.title}}</li>
  <!-- {{#  }) }} -->
</script>

<!--打印销售弹窗-->
<script type="text/html" id="printFinishedOrderTemplate">
  <form lay-filter="printFinishedOrderTemplateForm" class="layui-form open-form printTemplateForm">
    <div class="open-model">
      <div class="open-auto">
        <div class="my-print-box" id="printHtml">

        </div>
      </div>
      <div class="layui-form-item text-right">
        <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">取消</button>
        <button class="layui-btn" type="button" id="printPurchaseOrder">打印</button>
      </div>
    </div>
  </form>
</script>
<script src="/admin/assets/libs/jquery/jquery-3.2.1.min.js"></script>
<script src="/admin/assets/libs/jquery/jQuery.print.js.js"></script>

<!-- js部分 -->
<script>
  layui.use(
    [
      "layer",
      "form",
      "table",
      "admin",
      "laydate",
      "laytpl",
      "element",
      "upload",
    ],
    function () {
      var $ = layui.jquery;
      var layer = layui.layer;
      var form = layui.form;
      var table = layui.table;
      var config = layui.config;
      var admin = layui.admin;
      var laydate = layui.laydate;
      var laytpl = layui.laytpl;
      var element = layui.element;
      laydate.render({
        elem: 'input[name="dateRange"]',
        type: "date",
        range: true,
      });
      laydate.render({
        elem: "#productTime",
        type: "date",
        range: true,
        done: function (value, date, endDate) {
          if (value) {
            var dateValue = value.split(" - ");
            $("input[name='startProductTime']").val(dateValue[0] + " 00:00:00");
            $("input[name='endProductTime']").val(dateValue[1] + " 23:59:59");
          } else {
            $("input[name='startProductTime']").val("");
            $("input[name='endProductTime']").val("");
          }
        },
      });

      function printDoc(data) {
      showPrintFinishedOrderTemplate(data);
      return
      admin.open({
        type: 1,
        area: ["1060px", "800px"],
        offset: '65px',
        title: '工序开工单',
        content: '<div id="printHtml"></div>',
        success: function () {
          let html = "";
          // 获取详情数据
          admin.req("production/productionPlan/admin/productionWorkOrder/getWorkOrderDetails", {
            workOrderId: data.id
          }, function (res) {
            if (res.code === 200) {
              let orderItem = res.data;
              html += `<div class="print-title">工序开工单</div>
                    <div class="flexCt print-tip-info">
                        <div class="company">公司：${config.getTempData('companyName')}</div>
                        <div class="time">${orderItem.createTime}</div>
                    </div>
                    <div class="print-table">
                        <div class="print-view">
                            <div class="print-nape">
                                <div class="cell">
                                    <div class="name w-120">工序开工单号：</div>
                                    <div class="val flex-1">${orderItem.code}</div>
                                </div>
                                <div class="cell">
                                    <div class="name w-120">工序名称：</div>
                                    <div class="val flex-1">${orderItem.processName}</div>
                                </div>
                            </div>
                            <div class="print-nape">
                                <div class="cell">
                                    <div class="name w-120">生产数量：</div>
                                    <div class="val flex-1">${orderItem.workQuantity}</div>
                                </div>
                                <div class="cell">
                                    <div class="name w-120">工序状态：</div>
                                    <div class="val flex-1">${orderItem.statusName}</div>
                                </div>
                            </div>
                            <div class="print-nape">
                                <div class="cell">
                                    <div class="name w-120">计划开始时间：</div>
                                    <div class="val flex-1">${orderItem.planStartTime}</div>
                                </div>
                                <div class="cell">
                                    <div class="name w-120">计划结束时间：</div>
                                    <div class="val flex-1">${orderItem.planEndTime}</div>
                                </div>
                            </div>
                            <div class="print-nape">
                                <div class="cell w-100">
                                    <div class="th v-60" style="padding: 0">序号</div>
                                    <div class="th v-160">物料名称</div>
                                    <div class="th v-160">物料编号</div>
                                    <div class="th v-160">规格型号</div>
                                    <div class="th" style="width: 11%;">产品类型</div>
                                    <div class="th" style="width: 9%;">单位</div>
                                    <div class="th">数量</div>
                                </div>
                            </div>`;

              // 添加物料明细表格内容
              let list = orderItem.details || [];
              let fillValue = {};
              let filledArray = [...list, ...Array.from({ length: 5 - list.length }, () => fillValue)];
              filledArray.forEach((item, index) => {
                html += `<div class="print-nape">
                            <div class="cell w-100">
                                <div class="td v-60" style="padding: 0">${index + 1}</div>
                                <div class="td v-160">${item.skuName || ''}</div>
                                <div class="td v-160">${item.skuCode || ''}</div>
                                <div class="td v-160">${item.skuSpec || ''}</div>
                                <div class="td" style="width: 11%;">${item.productTypeName || ''}</div>
                                <div class="td" style="width: 9%;">${item.mainUnitName || ''}</div>
                                <div class="td">${item.workQuantity || ''}</div>
                            </div>
                        </div>`;
              });

              html += `<div class="print-nape nape-btm">
                                <div class="btm-sign lt">负责人签名与盖公司印章：</div>
                                <div class="sign-rt flex-1">
                                    <div class="cell w-100">
                                        <div class="name flex-1">制单人</div>
                                        <div class="name flex-1">审核人</div>
                                    </div>
                                    <div class="cell w-100">
                                        <div class="val flex-1">${orderItem.creatorName}</div>
                                        <div class="val flex-1">${orderItem.auditName || ''}</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>`;
              $('#printHtml').html(html);

              // 添加打印按钮
              let btnHtml = '<div class="layui-form-item text-right"><button type="button" class="layui-btn" id="printWorkOrder">打印</button></div>';
              $('#printHtml').after(btnHtml);

              // 绑定打印事件
              $("#printWorkOrder").click(function () {
                $('#printHtml').print({
                  debug: false,
                  importCSS: true,
                  printContainer: true,
                  operaSupport: false
                });
              });
            }
          });
        }
      });
    }

      // 渲染表格
      var insTb = table.render({
        elem: "#productionRecordTable",
        url:
          config.base +
          "production/productionRecord/admin/productionRecord/list",
        page: true,
        cellMinWidth: 100,
        cols: [
          [
            { type: "numbers", title: "序号" },
            {
              field: "productionPlanRecordCode",
              title: "制造令编号",
              align: "center",
              width: 160,
            },
            { field: "planTypeName", title: "生产计划类型", align: "center" },
            { field: "bookCode", title: "基准书code", align: "center" },
            { field: "orderTypeDesc", title: "计划订单类型", align: "center" },
            // { field: "productTypeName", title: "物料类别", align: "center" },
            { field: "customerSkuCode", title: "物料编码", align: "center" },
            { field: "customerSkuSpec", title: "物料规格", align: "center" },
            { field: "productionPlanQuantity", title: "生产数量", align: "center" },
            { field: "workshopName", align: "center", title: "车间" },

            {
              field: "shipmentTime",
              title: "交货时间",
              align: "center",
              width: 160,
            },
            { field: "statusDesc", title: "状态", align: "center" },
            {
              field: "createTime",
              title: "创建时间",
              align: "center",
              width: 160,
            },
            {
              align: "center",
              fixed: "right",
              toolbar: "#productionRecordTableBar",
              title: "操作",
              width: 320,
            },
          ],
        ],
        done: function (res, curr, count) {},
      });

      // 工具条点击事件
      table.on("tool(productionRecordTable)", function (obj) {
        var data = obj.data;
        if (obj.event === "checkPlan") {
          //详情
          // checkProductionPlanDetail(data);
          admin.formOpen({
            area: ["85%", "90%"],
            title: "生产计划排产",
            path: "components/productionPlan/productionPlanningForm.html",
            success: function () {
              parentData.eventName = "detail";
              // parentData.id = data.id;
              parentData.data = data;
              console.log(data, 9999);
            },
          });
        } else if (obj.event === "stop") {
          //终止
          productionRecordStopModel(data);
        }else if (obj.event === "printDoc") {
        // 暂停
        printDoc(data);
      }  else if (obj.event === "workListBtn") {
          //开工单列表
          admin.formOpen({
            area: ["85%", "90%"],
            title: "开工单列表",

            path: "components/productionPlan/productionWorkOrder.html",
            success: function () {
              parentData.where = {
                productionPlanRecordId: data.id,
              };
            },
          });
        }else if(obj.event==='checkPlan1'){
          admin.formOpen({
            area: ["85%", "90%"],
            title: "领料详情",
            path: "components/productionRecord/productionRecordForm.html",
            success: function () {
              parentData.data=data
              // parentData.where = {
              //   productionPlanRecordId: data.id,
              // };
            },
          });
        }
      });

      // 搜索
      form.on("submit(formSubSearchLog)", function (data) {
        data.field.startTime = "";
        data.field.endTime = "";
        if (data.field.dateRange) {
          data.field.startTime = data.field.dateRange.split(" - ")[0];
          data.field.endTime = data.field.dateRange.split(" - ")[1];
        }

        insTb.reload({ where: data.field, page: { curr: 1 } }, "data");
      });

      // 重置搜索
      form.on("submit(resets)", (data) => {
        data.field.startTime = "";
        data.field.endTime = "";
        insTb.reload(
          { where: admin.resetSearch(data.field), page: { curr: 1 } },
          "data"
        );
      });

      form.render("select");

      // 查询排产计划明细
      function checkProductionPlanDetail(data) {
        admin.open({
          type: 1,
          area: ["82%", "85%"],
          title: "物料生产计划排产明细",
          content: $("#checkProductionPlanTemplate").html(),
          success: function () {
            let productionPlanId = data.productionPlanId;
            let productionPlanRecordId = data.id;
            let customerSkuCode = data.customerSkuCode;
            // 顶部详情数据
            table.render({
              elem: "#checkProductionPlanTable",
              data: [data],
              cellMinWidth: 100,
              cols: [
                [
                  { field: "code", align: "center", title: "计划编号" },
                  {
                    field: "orderTypeDesc",
                    align: "center",
                    title: "计划订单类型",
                  },
                  { field: "bookCode", align: "center", title: "基准书" },
                  {
                    field: "customerSkuCode",
                    align: "center",
                    title: "生产物料",
                  },
                  {
                    field: "customerSkuSpec",
                    align: "center",
                    title: "物料规格",
                  },
                  {
                    field: "productTypeName",
                    align: "center",
                    title: "所属物料系列",
                  },
                  {
                    field: "productionQuantity",
                    align: "center",
                    title: "生产数量",
                  },
                  { field: "customerName", align: "center", title: "客户信息" },
                  {
                    field: "shipmentTime",
                    align: "center",
                    title: "交货时间",
                    width: 160,
                  },
                  { field: "statusDesc", align: "center", title: "状态" },
                  {
                    field: "createTime",
                    align: "center",
                    title: "创建时间",
                    width: 160,
                  },
                ],
              ],
            });

            // 查询计划的排产工序
            // admin.req('enterprise/echnologyParam/admin/echnologyParam/list', {
            admin.req(
              "enterprise/echnologyParam/admin/echnologyParam/getEchonlogyInfoBy/" +
                data.bookId,
              {},
              function (res) {
                layer.closeAll("loading");
                if (res.code == 200) {
                  if (res.data.length > 0) {
                    let checkProcessNodsData = [];
                    res.data.forEach((item, index) => {
                      checkProcessNodsData.push({
                        title: item.name,
                        id: item.id,
                      });
                    });
                    $("#checkProductionPlan").show();
                    // 渲染工序
                    laytpl(checkProcessNodsTitleTemplate.innerHTML).render(
                      checkProcessNodsData,
                      function (html) {
                        $("#checkProcessNodsTitle").html(html);
                        $("#checkProcessNodsTitle")
                          .find("li")
                          .removeClass("layui-this")
                          .eq(0)
                          .addClass("layui-this");
                      }
                    );
                    getProcessOutputAndYield(res.data[0].id);
                    getProcessDeviceByProcessId(res.data[0].id);
                  } else {
                    $("#checkProductionPlan").hide();
                  }
                } else {
                  layer.msg(res.msg, { icon: 2 });
                }
              },
              "GET"
            );

            // 查询工序已排产数量和平均合格率
            function getProcessOutputAndYield(processId) {
              admin.req(
                "production/productionPlan/admin/productionPlan/getProcessOutputAndYield",
                {
                  productionPlanId: productionPlanId,
                  processId: processId,
                },
                function (res) {
                  layer.closeAll("loading");
                  if (res.code == 200) {
                    $("input[name='checkRate']").val(res.data.yield + "%");
                    $("input[name='checkQuantity']").val(
                      res.data.productionQuantity
                    );
                  } else {
                    layer.msg(res.msg, { icon: 2 });
                  }
                },
                "GET"
              );
            }

            // 设备表格
            var checkDeviceProductionTable = table.render({
              elem: "#checkDeviceProductionTable",
              data: [],
              cellMinWidth: 120,
              cols: [
                [
                  { type: "numbers", width: 50, title: "序号" },
                  { field: "deviceModel", title: "设备型号", align: "center" },
                  { field: "deviceCode", title: "设备编码", align: "center" },
                  { field: "yeild", title: "机台平均合格率", align: "center" },
                  // , {field: 'planProductionQuantity', title: '计划排产数量', align: 'center'}
                  {
                    field: "outputTime",
                    title: "当前计划截止时间",
                    align: "center",
                  },
                ],
              ],
            });

            // 查询计划排产明细工序的设备
            function getProcessDeviceByProcessId(processId) {
              admin.req(
                "production/productionPlan/admin/productionPlan/getProcessDeviceByProcessId",
                {
                  productionPlanId: productionPlanId,
                  productionPlanRecordId: productionPlanRecordId,
                  processId: processId,
                },
                function (res) {
                  layer.closeAll("loading");
                  if (res.code == 200) {
                    table.reload("checkDeviceProductionTable", {
                      data: res.data,
                    });
                  } else {
                    layer.msg(res.msg, { icon: 2 });
                  }
                },
                "GET"
              );
            }

            // tab切换改变下标
            element.on("tab(checkProductionPlan)", function () {
              let id = this.getAttribute("process-id");
              layer.load(2);
              getProcessOutputAndYield(id);
              getProcessDeviceByProcessId(id);
            });
          },
        });
      }

      /**
       * 排产记录终止
       */
      function productionRecordStopModel(data) {
        layer.confirm(
          "确定终止排产计划吗？",
          {
            skin: "layui-layer-admin",
          },
          function (i) {
            layer.close(i);
            layer.load(2);
            admin.req(
              "production/productionRecord/admin/productionRecord/stop",
              { productionPlanId: data.id },
              function (data) {
                layer.closeAll("loading");
                if (data.code == 200) {
                  layer.msg(data.msg, { icon: 1 });
                  table.reload("productionRecordTable");
                  layer.closeAll("page");
                } else {
                  layer.msg(data.msg, { icon: 2 });
                }
              },
              "POST"
            );
          }
        );
      }


      function showPrintFinishedOrderTemplate(data) {
  admin.open({
    type: 1,
    area: ["1060px", "800px"],
    offset: '65px',
    title: '打印',
    content: $('#printFinishedOrderTemplate').html(),
    success: function () {
      let html = "";
      admin.req("production/productionPlan/admin/productionWorkOrder/getProcessCardBy/" + data.id, {}, function (res) {
        if (res.code === 200) {
          let orderItem = res.data;

          html += `
           <div class="print-ab-title">
              <div class="print-img">
                <img src="${orderItem.cardPrCord}" alt="">
                </div>
             <div class="print-title">工序流程卡</div>
            </div>
         
         
      </div>
      <div class="print-table">
        <div class="print-view">
        
          `;

          html += `

          <div class="print-nape ">
            <div class="cell flex-1">
               <div class="name " style='width:150px !important;'>制造令</div>
              <div class="val flex-1">${orderItem.code || ''}</div>
              <div class="val flex-1">产品名称</div>
              <div class="val flex-1">${orderItem.skuName || ''}</div>
              <div class="val flex-1">生产数量</div>
              <div class="val flex-1">${orderItem.quality || ''}</div>
            </div>
          </div>
          <div class="print-nape ">
            <div class="cell flex-1">
               <div class="name " style='width:150px !important;'>产品图号</div>
              <div class="val flex-1">${orderItem.tuHao || ''}</div>
              <div class="val flex-1">产品编码</div>
              <div class="val flex-1">${orderItem.skuCode || ''}</div>
              <div class="val flex-1">产出时间</div>
              <div class="val flex-1">${orderItem.productTime || ''}</div>
            </div>
          </div>
          
          <div class="print-nape ">
           <div class="cell flex-1">
              <div class="name " style='width:150px !important;'>订单号</div>
              <div class="val flex-1">${orderItem.orderCode || ''}</div>
              <div class="val flex-1">物料编码</div>
              <div class="val flex-1">${orderItem.skuCode || ''}</div>
              <div class="val flex-1">交货时间</div>
              <div class="val flex-1">${orderItem.shipmentTime || ''}</div>
            </div>
          </div>

          <div class="print-nape ">
            <div class="cell  w-120 justify" style='width:150px !important;'>
              <div class="name flex-1">序号</div>
              <div class="val flex-1">工序码</div>
            </div>
            <div class="cell flex-1">
               <div class="name flex-1 ">工序名称</div>
              <div class="name flex-1">工艺要求</div>
              <div class="name flex-1">机型</div>
              <div class="name flex-1">夹具/量具</div>
              <div class="name flex-1">工种</div>
            </div>
          </div>

        ${orderItem.workOrderInfoVoList.map((item, index) => `  <div class="print-nape hei-me">
            
              <div class="cell w-120 justify" style='width:150px !important;'>
                <div class="name flex-1">${index + 1}</div>
                <div class="val flex-1"> <img src="${item.processPrCode}" alt="" style="width: 95%"></div>
              </div>
              <div class="cell flex-1">
                <div class="val flex-1">${item.processName || ''}</div>
                <div class="val flex-1">${item.processContent || ''}</div>
                <div class="val flex-1">${item.deviceTypeName || ''}</div>
                <div class="val flex-1">${item.fixture || ''}/${item.measuringTools || ''}</div>
                <div class="val flex-1">${item.personnelWorkTypeName || ''}</div>
              </div>  
           
          </div>

           `).join('')}

          </div>
        </div>`
          $('#printHtml').html(html);

          $("#printPurchaseOrder").click(function () {
            $('#printHtml').print({
              debug: false,
              importCSS: true,
              printContainer: true,
              operaSupport: false
            });
          })
        }
      });
    }
  })
}
    }
  );
</script>

<style>
  .print-ab-title{
    position: relative;
    height: 90px;
    padding-bottom: 10px;
    .print-img{
    width: 80px;
    height: 80px;
    position: absolute;
    left: 1px;
    top: 10px;
    border: 1px solid #0b0707;
    img{
      width: 130%;
      height: 130%;
      position: absolute;
      transform: translate(-15%, -15%);

    }
    }
  }
  .print-header{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    .header-content{
      width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    }
    
  }

  .my-print-box .print-view .btm-sign {
    height: 698px !important;
    width: 50%;
    padding-left: 10px;

  }

  .cardU img {
    width: 100%;
    height: 100%;
  }
  .hei-me{
    height: 150px;
  }
  .my-print-box .val, .my-print-box .print-view .print-nape .td{
    white-space: wrap;
  }
  .my-print-box .val, .my-print-box .print-view .print-nape .td{
    word-break: break-all;
  }
</style>